<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋在线对战 - 游戏大厅</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.6.1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="top-nav">
        <div class="nav-content">
            <div class="nav-logo">🔴⚫ 五子棋在线对战</div>
            <div class="nav-user">
                <span class="nav-username" id="navUsername">游客</span>
                <button class="nav-logout" onclick="logout()">退出登录</button>
            </div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="container">
        <div class="hall-container">
            <!-- 左侧用户信息面板 -->
            <div class="user-panel">
                <h2>📊 个人信息</h2>
                <div class="user-stats">
                    <div class="stat-item">
                        <span class="stat-label">用户名：</span>
                        <span class="stat-value" id="username">-</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">当前积分：</span>
                        <span class="stat-value" id="currentScore">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">总比赛场数：</span>
                        <span class="stat-value" id="totalGames">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">获胜场数：</span>
                        <span class="stat-value" id="winGames">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">胜率：</span>
                        <span class="stat-value" id="winRate">0%</span>
                    </div>
                </div>
                
                <div class="margin-top">
                    <div class="status-message status-info" id="connectionStatus">
                        <span id="connectionText">正在连接...</span>
                        <span class="loading" id="connectionLoading"></span>
                    </div>
                </div>
            </div>

            <!-- 中央匹配区域 -->
            <div class="matching-area">
                <h2>🎮 在线匹配</h2>
                <div id="matchingContainer">
                    <button class="matching-btn" id="matchBtn" onclick="toggleMatching()">
                        <span id="matchBtnText">开始匹配</span>
                    </button>
                    
                    <div class="matching-status" id="matchingStatus" style="display: none;">
                        <p id="statusText">正在匹配中...</p>
                        <div class="timer" id="matchTimer">00:00</div>
                        <p>排队位置：第 <span id="queuePosition">-</span> 位</p>
                        <p>预计等待时间：<span id="estimatedTime">-</span> 秒</p>
                    </div>
                </div>
                
                <div class="status-message" id="matchMessage" style="display: none;"></div>
            </div>

            <!-- 右侧积分流水面板 -->
            <div class="history-panel">
                <h2>📋 对局历史</h2>
                <div class="history-list" id="historyList">
                    <div class="text-center" style="padding: 20px; color: #7f8c8d;">
                        <span class="loading"></span>
                        <p style="margin-top: 10px;">加载中...</p>
                    </div>
                </div>
                
                <div class="pagination" id="pagination" style="display: none;">
                    <button class="page-btn" id="prevPage" onclick="loadHistory(currentPage - 1)">上一页</button>
                    <span id="pageInfo">1 / 1</span>
                    <button class="page-btn" id="nextPage" onclick="loadHistory(currentPage + 1)">下一页</button>
                </div>
            </div>
        </div>
    </div>

    <script src="hall.js"></script>
</body>
</html> 